@import "./base.scss";
@import "./sprites.scss";

//页面顶部样式，包括捷旅logo、微信版入口图标、客服电话等
.index-top{
    width: 1180px;
    height: 43px;
    margin: 15px auto;

    @at-root .sprites{
        background:url(../static/sprites/sprites.png) no-repeat;

        &.fzg_logo{
            @include fzg_logo;
            float: left;            
        }
        &.weixinban{
            @include weixinban;

            &:hover{
                @include weixinban2;
                &+.erweima-box{
                    display: block;
                }
            }
        }
        &.dianhua{
            @include dianhua;

            &:hover{
                @include dianhua2;
            }
        }
    }

    @at-root .contact-us-wrap{
        float: right;

        .contact-item{
            float: left;
            margin-left: 40px;

            >div{
                float: left;
            }

            @at-root .contact-icon{
                width: 43px;
                height: 43px;

                @at-root .erweima-box{
                    position: absolute;
                    background: #e4e7eb;
                    top: 65px;
                    border-radius: 3px;
                    z-index: 10;
                    display: none;

                    @at-root .erweima-box-top{
                        background:url(../static/sprites/sprites.png) no-repeat;
                        @include weixin_sanjiao;
                        position: relative;
                        top: -5px;
                        margin-left: 16px;
                    }

                    @at-root .erweima-box-inner{
                        border: 1px solid #b8b8b8;
                        margin: 3px;
                        margin-top: -6px;
                        background: white;
                        padding: 15px;
                        padding-top: 20px;
                        text-align: center;

                        @at-root .erweima-box-erweima{
                            background:url(../static/sprites/sprites.png) no-repeat;
                            @include erweima110;
                            margin-bottom: 10px;
                        }
                    }
                }
            }
            @at-root .contact-text{
                color: $wxRed;
                font-size: 14px;
                margin: 5px 10px;

                >div{
                    line-height: 17px;
                }
                .gray-9{
                    color: $gray-9;
                }
            }
        }
    }
}

//导航栏样式
.fzg_nav{
    height: 40px;
    font-size: 15px;
    background: $baseBlue;

    @at-root .fzg-nav-inner{
        width: 1180px;
        height: 40px;
        margin: auto;

        @at-root .fzg-nav-wrap{
            float: left;

            @at-root .fzg-nav-ul{
                line-height: 40px;                

                li{
                    float: left;
                    color: white;                    
                    background: $baseBlue;
                    padding: 0 5px;
                    margin: 0 2px;
                    position: relative;

                    +.divider{  // '+' 是非的意思
                        padding: 0;
                    }

                    &.current, &:hover{
                        background: darken($darkenBlue, 5%);
                    }

                    a{
                        text-decoration: none;
                        cursor: pointer;
                    }

                    &.divider{
                        width: 1px;
                        height: 16px;
                        margin-top: 12px;
                        background: white;
                    }
                }
                
            }
        }
    
        @at-root .fzg-login-reg{
            float: right;
            width: 118px - 23px * 2;
            height: 40px;
            line-height: 40px;
            padding: 0 23px;
            background: darken($darkenBlue, 5%);

            >div{
                min-width: 30px;        //兼容IE
                float: left;
                cursor: pointer;
                
                &.divider{
                    min-width: 1px;
                    width: 1px;
                    height: 16px;
                    margin: 12px 5px 0;
                    background: white;
                }
                a{
                    color: white;
                }
            }
        }
    }
}